import React, { useState, useEffect } from 'react';
import styles from './style.less';
import { getLogin } from '../service';
import { Home } from '../data';

export default function HomeComp(props: any) {
  // console.log(props, '=====');

  const [loginMessage, setLoginMessage] = useState<Home>({
    auditPlanCount: '',
    auditRefusedPlanCount: '',
    balance: '',
    budget: '',
    clickCount: '',
    notBudgetPlanCount: '',
    platformChannelName: '',
    realtimeCost: '',
    realtimeCostSum: '',
    showCount: '',
    userName: '',
    validPlanCount: '',
    status: ''
  });
  const params = props.location.query.id;

  useEffect(() => {
    getLogin(params).then((res) => {
      console.log(res, '请求结果');
      if (res) {
        setLoginMessage(res);
        // setTableData([]);
      }
    });
  }, []);

  return (
    <div className={styles.wrapperDetail}>
      <div className={styles.userDetail}>
        {/* 标题 */}
        <h2 className={styles.title}>
          <span>账户信息</span>
        </h2>
        {/* 账户信息详情 */}
        <div>
          <div className={styles.detail}>
            <div>
              <span className={styles.label}>推广余额：</span>
              <span>{loginMessage.balance}</span>
            </div>
            <div>
              <span className={styles.label}>昨日消费：</span>
              <span>{loginMessage.realtimeCost}</span>
            </div>
            <div>
              <span className={styles.label}>每日预算：</span>
              <span>{loginMessage.budget}</span>
            </div>
          </div>
        </div>
      </div>
      {/* 中间部分信息 */}
      <div className={styles.userDetail}>
        {/* 标题 */}
        <h2 className={styles.title}>
          <span>今日统计</span>
        </h2>
        {/* 统计详情 */}
        <div className={styles.detail}>
          <div>
            <span className={styles.label}>点击次数：</span>
            <span>{loginMessage.clickCount}次</span>
          </div>
          <div>
            <span className={styles.label}>展现次数：</span>
            <span>{loginMessage.showCount}次</span>
          </div>
          <div>
            <span className={styles.label}>消费：</span>
            <span>{loginMessage.realtimeCostSum}元</span>
          </div>
          <div></div>
        </div>
      </div>
      {/* 下面部分信息 */}
      <div className={styles.userDetail}>
        {/* 标题 */}
        <h2 className={styles.title}>
          <span>广告计划</span>
        </h2>
        {/* 广告计划详情 */}
        <div className={styles.detail}>
          <div>
            <span className={styles.label}>投放中：</span>
            <span>{loginMessage.validPlanCount}次</span>
          </div>
          <div>
            <span className={styles.label}>审核中：</span>
            <span>{loginMessage.auditPlanCount}次</span>
          </div>
          <div>
            <span className={styles.label}>未通过：</span>
            <span>{loginMessage.auditRefusedPlanCount}元</span>
          </div>
          <div></div>
        </div>
      </div>
    </div>
  );
}
